<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
     <div >
          <h1>{{myname}}</h1>
          <button @click="change">改变</button>
          <div>
            <h1 v-for="(val,key,index) in car">
              {{index}}--{{key}}--{{val}}
            </h1>
          </div>
          <button @click="add">新增属性</button>

        <h1 v-for="(item,index) in arr" :key="index">{{item}}</h1>
        <button @click="addArr">新增数组</button>
     </div>
  </div>
  <script src="./vue.js"></script>
  <script >
         new Vue({
          el:"#app",
          data(){
            return {
              myname:"麦克阿瑟",
              car:{
                name:"奥迪",
                price:1000000
              },
              arr:["王宝强","陈羽凡","贾乃亮"]
            }
          },
          methods:{
            change(){
              this.myname="特朗普"
            },
            add(){
              //面试题  vue新增数据为什么页面无法响应？
              // vue2的数据响应是原理式 通过Object.defineProperty 实现的  他的set 负责劫持数据 get 负责赋值的数据变化
              // 但是 Object.defineProperty 是进入组件一次性的将data的数据递归监听完毕，对象和数组新增数据的时候，页面无法及时响应式
 
              // this.car.make="比亚迪"

              // 解决方案 this.$set()
              // this.$set(要修改的对象，修改的属性名，修改的属性值)
               this.$set(this.car,"make","比亚迪")

            },
            addArr(){
              // this.arr.push("李云龙")
              // this.arr[3]="李云龙"
              // this.$set(要修改的数组，下标，数组的值)
              this.$set(this.arr,3,"李云龙")

            }
          }
         })
  </script>
</body>
</html>